<template>
  <div class="courseware-dialog_container">
    <v-dialog v-if="showDialog" v-model="showDialog" max-width="800">
      <v-card style="padding: 20px">
        <template v-if="percentage !== 100">
          <el-upload
            ref="uploadRef"
            action="#"
            accept=".doc,.docx,.ppt,.pptx,.pdf"
            :limit="1"
            :show-file-list="false"
            :http-request="handleUpload"
          >
            <el-button type="primary" :loading="upLoading">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">支持上传.doc,.ppt,.pptx,.pdf文件</div>
            </template>
          </el-upload>
          <template v-if="percentage">
            <span>上传进度</span>
            <el-progress v-show="percentage" :percentage="percentage" />
          </template>
        </template>

        <div v-else class="mb-4">
          <div>
            <span style="color: rgba(0, 0, 0, 0.6); font-size: 12px">
              转码文件名
            </span>
            <p style="word-break: break-all">
              {{ courseware.title }}
            </p>
            <span style="color: rgba(0, 0, 0, 0.6); font-size: 12px">
              转码文件地址
            </span>
            <p style="word-break: break-all">
              {{ courseware.url }}
            </p>
            <span style="color: rgba(0, 0, 0, 0.6); font-size: 12px">
              文件页数
            </span>
            <p style="word-break: break-all">
              {{ courseware.pages }}
            </p>
            <span style="color: rgba(0, 0, 0, 0.6); font-size: 12px">
              分辨率
            </span>
            <p style="word-break: break-all">
              {{ courseware.resolution }}
            </p>
          </div>
          <v-btn
            style="margin-top: 10px"
            color="primary"
            @click="addTranscodeFile"
          >
            确认添加
          </v-btn>
        </div>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn text="关闭" @click="handleClose"></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import TiwTranscode from "@/utils/TiwTranscode";
import { sig, taskInfo, uploads } from "@/service/user";

const statusObj = {
  QUEUED: "QUEUED", // 正在排队等待转换
  PROCESSING: "PROCESSING", // 转换中
  FINISHED: "FINISHED", // 转换完成
};
let timer;

export default {
  data() {
    return {
      percentage: 0,
      upLoading: false,
      showDialog: false,
      courseware: {
        title: "课件",
        url: "",
        resolution: "",
        pages: 0,
      },
    };
  },
  methods: {
    async getTaskInfo(taskId) {
      try {
        const { data } = await taskInfo(taskId);
        this.percentage = data.Progress;
        console.log(data, "taskInfo");
        if (data.Status === statusObj.FINISHED) {
          this.upLoading = false;
          this.courseware.url = `${data.ResultUrl}`;
          this.courseware.urlName = `${data.Title}`;
          this.courseware.title = `${data.Title}`;
          this.courseware.pages = `${data.Pages}`;
          this.courseware.resolution = `${data.Resolution}`;
          clearInterval(timer);
          return;
        }
        timer = setInterval(() => {
          this.getTaskInfo(taskId);
        }, 3000);
      } catch (e) {
        this.upLoading = false;
        clearInterval(timer);
        console.error(e);
      }
    },
    handleClose() {
      this.courseware.url = null;
      this.courseware.title = null;
      this.courseware.pages = 0;
      this.courseware.resolution = "";
      this.showDialog = false;
    },
    async handleUpload(e) {
      try {
        console.log(e, "e");
        const { file } = e;
        const fmData = new FormData();
        fmData.append("file", file);
        this.upLoading = true;
        const { data } = await uploads(fmData);
        this.getTaskInfo(data);
        this.$refs.uploadRef.clearFiles();
      } catch (e) {
        this.$refs.uploadRef.clearFiles();
        this.upLoading = false;
        console.error(e);
      }
    },
    show() {
      this.showDialog = true;
      this.percentage = 0;
    },

    addTranscodeFile() {
      // 主转码
      window.teduBoard.addTranscodeFile({
        url: this.courseware.url,
        title: this.courseware.title || `测试文件-${Date.now()}`,
        pages: this.courseware.pages,
        resolution: this.courseware.resolution,
      });

      // 重置数据
      this.handleClose();
    },
  },
};
</script>
